<template>
  <div class="box">
    <Chart :option="options" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount, reactive, watch, onMounted } from 'vue';
import Chart from '@/components/charts/index.vue';
import option from './modules/bar_cpu';
import { getPodsLoadApi } from '@/api/clusterManagement';

export default defineComponent({
  components: {
    Chart
  },
  created() {
    this.fetchData();
  },
  setup() {
    let timer: any = null;
    const options = reactive(option);
    const seriesDataMap = reactive(new Map()); // 使用 Map 存储容器ID对应的系列数据
    const containerNames = reactive([]); // 存储容器名称列表
    const containerNameMap = reactive({});
    option.xAxis.data[0]=new Date().toLocaleTimeString(); // 初始化横坐标数据
    function fetchData() {
      getPodsLoadApi().then((res: any) => {
        const data = res.data;

        Object.keys(data).forEach((containerId) => {
          const containerData = data[containerId];
          // 将容器名称添加到容器名称列表中
          containerNames.push(containerData.container_name);
          containerNameMap[containerId] = containerData.container_name;

          if (!seriesDataMap.has(containerId)) {
            // 如果 Map 中不存在该容器ID，则创建一个新的系列数据列表
            seriesDataMap.set(containerId, reactive([parseFloat(containerData.cpu)]));
            // seriesDataMap.get(containerId).push(parseFloat(containerData.cpu));
          }
          // 将内存数据添加到对应的系列数据列表中
          const seriesData = seriesDataMap.get(containerId);
          if (seriesData.length > 60) {
            // 如果数据长度已经达到100条，则删除第一条数据
            seriesData.shift();
          }
          seriesData.push(parseFloat(containerData.cpu));
          // seriesDataMap.get(containerId).push(parseFloat(containerData.cpu));
        });

        // // 选择前5个容器名称作为 top 5
        const top10ContainerNames = containerNames.slice(0, 5);
        console.log("top10ContainerNames = ", top10ContainerNames);
        // 更新图表中的容器名称
        options.legend.data = top10ContainerNames;
        options.title.text = "cpu使用情况"

        updateXAxis(); // 每次获取新数据后更新横坐标数据
      }).catch((error) => {
        console.error('Failed to fetch data:', error);
      });
    }

    function updateXAxis() {
      const currentTime = new Date().toLocaleTimeString(); // 获取当前时间
      if (options.xAxis.data.length > 60) {
        // 如果横坐标数据长度超过100条，则删除第一条数据
        options.xAxis.data.shift();
      }
      options.xAxis.data.push(currentTime);
    }

    // 每隔5秒更新一次数据
    timer = setInterval(fetchData, 5000);

    // 组件销毁时清除定时器
    onBeforeUnmount(() => {
      clearInterval(timer);
      timer = null;
    });

    // 监听seriesDataMap的变化，更新options中的series属性
    onMounted(() => {
      // 每当seriesDataMap发生变化时，更新options中的series属性
      watch(seriesDataMap, () => {
        // 将 Map 中的所有系列数据转换为图表所需的数据格式

        options.series = Array.from(seriesDataMap.entries()).map(([containerId, data]) => ({
          type: 'line',
          smooth: true,
          name: containerNameMap[containerId] || 'Unknown',
          data,
          symbol: 'none',
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        }));
      });
    });

    return {
      options,
      fetchData,
    };
  }
});
</script>
<style lang="scss" scoped>
.box {
  margin: 10px auto 0;
  width: calc(100% - 40px);
  // width: 600px;
  height: 400px;
  background: var(--system-page-background);
  padding: 20px;
  overflow: hidden;
}
</style>